<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet">
    <script src="js/jquery-1.6.4.js" type="text/javascript"></script>
</head>
<style type="text/css">
    #demo1{
        width: 100px;
        height: 200px;
        background-color: darkred;
        position:absolute;
        left:0;
        top:50px;
    }
    p{
        width: 200px;
        height: 200px;
        position: absolute;
        left:300px;
        top: 20px;
        background-color: darkgray;
        display: none;

    }

</style>


<body>
<input type="button" value="点击">
<div id="demo1" >


</div>
<a href="#">aaaaa</a>
<p>    bbbbbbbbb</p>

<script type="text/javascript">
    $('input').click(function(){

        $('#demo1').animate({
            'left':'500px',
            'top':'300px',
            'opacity':'0.2'
        },3000, function () {
            $('#demo1').css('background','red');

        });

    })
    $('a').hover(function () {
        $('p').stop(true,true).slideDown(500);
    },function() {
        $('p').stop(true,true).slideUp(500);
    });
   
</script>
</body>
</html>